<template>
  <div>
    <el-card style="margin: 10px; border: 1px solid gold">
      <!-- 查询条件 -->
      <el-collapse
              accordion
              v-model="data.activeName"
              class="card-bg">
        <el-collapse-item name="1">
          <template #title>
            <div class="innerHeader">
              管理
            </div>
          </template>
          <div
                  style="display: flex;"
                  class="card-search">
            <el-form
                    :inline="true"
                    :model="data.formList"
                    size="default"
                    label-width="100px">
              <el-form-item label="附件组ID">
                <el-input
                        placeholder="请输入附件组ID"
                      v-model="data.formList.groupId"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="附件原始名称">
                <el-input
                        placeholder="请输入附件原始名称"
                      v-model="data.formList.name"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="附件存储名称">
                <el-input
                        placeholder="请输入附件存储名称"
                      v-model="data.formList.storageFileName"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-input
                        placeholder="请输入创建时间"
                      v-model="data.formList.createdTime"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="创建人姓名">
                <el-input
                        placeholder="请输入创建人姓名"
                      v-model="data.formList.createdBy"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="创建人ID">
                <el-input
                        placeholder="请输入创建人ID"
                      v-model="data.formList.createdById"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="状态（0删除，1有效）">
                <el-input
                        placeholder="请输入状态（0删除，1有效）"
                      v-model="data.formList.status"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="附件详细ID">
                <el-input
                        placeholder="请输入附件详细ID"
                      v-model="data.formList.bizId"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="拍照项名称">
                <el-input
                        placeholder="请输入拍照项名称"
                      v-model="data.formList.tagName"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
              <el-form-item label="进度">
                <el-input
                        placeholder="请输入进度"
                      v-model="data.formList.percentage"
                      style="width: 200px"
                      @keyup.enter.native="getData">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-card style="margin: 10px; border: 1px solid gold">
      <!-- 操作按钮区 -->
      <div style="margin:10px 0;">
        <el-button
                type="success"
                icon="DocumentAdd"
                @click="addData()">
          新增
        </el-button>
        <el-button
                type="info"
                icon="Download"
                @click="downloadExcelTemplate()">
          下载模板
        </el-button>
        <el-button
                type="primary"
                icon="Upload"
                @click="uploadExcel()">
          导入
        </el-button>
        <el-button
                type="warning"
                icon="DocumentDelete"
                @click="deleteDataMany()">
          删除
        </el-button>
        <el-dropdown
                style="margin-left:8px;"
                split-button
                type="primary">
          更多功能
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>功能1</el-dropdown-item>
              <el-dropdown-item>功能2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div style="float:right;">
          <el-button
                  type="primary"
                  @click="queryData()"
                  icon="Search"
                  :loading="data.isSearch">
            查询
          </el-button>
          <el-button
                  @click="resetData()"
                  icon="Close">
            清空
          </el-button>
          <el-button
                  @click="excelData()">
            导出数据
          </el-button>
        </div>
      </div>

      <!-- 表格呈现 -->
      <el-table
              :data="data.tableData"
              :height="data.screenHeight - data.otherHeight"
              tooltip-effect="dark"
              style="width:100%"
              stripe
              size="default"
              border
              @selection-change="selectionChanged">
        <el-table-column
                type="selection"
                width="60">
        </el-table-column>
        <el-table-column
                prop="id"
                label="id"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="groupId"
                label="附件组ID"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="name"
                label="附件原始名称"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="storageFileName"
                label="附件存储名称"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="createdTime"
                label="创建时间"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="createdBy"
                label="创建人姓名"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="createdById"
                label="创建人ID"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态（0删除，1有效）"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="bizId"
                label="附件详细ID"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="tagName"
                label="拍照项名称"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                prop="percentage"
                label="进度"
                width="180"
                align="center">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="400">
          <template #default="scope">
            <el-link
                    style="margin-right: 20px"
                    @click="toUpdate(scope)"
                    type="primary"
                    size="small"
                    :underline="false">
              更新
            </el-link>
            <el-link
                    style="margin-right: 20px"
                    @click="toDetail(scope)"
                    type="primary"
                    size="small"
                    :underline="false">
              查看详情
            </el-link>
            <el-link
                    @click="toDelete(scope)"
                    type="primary"
                    size="small"
                    :underline="false">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <el-pagination
              v-model:current-page="data.pageConfig.currentPage"
              v-model:page-size="data.pageConfig.pageSize"
              class="customPage mt-10"
              background
              :page-sizes="[10, 20, 50]"
              :current-page="data.pageConfig.currentPage"
              :page-size="data.pageConfig.pageSize"
              :total="data.pageConfig.total"
              layout="sizes,total, ->, prev, pager, next"
      />
    </el-card>
    <ItemDialog ref="itemDialog" :type="data.type"></ItemDialog>
    <Upload ref="uploadExcelRef" @callback="uploadExcelCallback"></Upload>
  </div>
</template>
<script lang="ts" setup>
    import Api from '../../api/api_sysoss.js'
    import ItemDialog from './Item.vue'
    import { reactive, ref, defineProps, toRefs, onMounted} from 'vue'
    import Upload from "../../utils/oss/upload.vue";
    import { useStore } from "vuex";
    import { useRouter } from 'vue-router'
    import {ElMessage, ElMessageBox} from "element-plus";

    const store = useStore();
    const router = useRouter()

    // Data
    const data = reactive({
        context: { componentParent: this },// context: 父对象
        screenHeight: window.innerHeight,// screenHeight:控制高度自适应-页面高度
        otherHeight: 310,// otherHeight:控制高度自适应-表格外的高度
        isSearch: false, // isSearch:控制搜索状态
        detailUrl: '/name/sysoss/item', // detailUrl:详情页面地址
        selectedRows: {}, // selectedRows:选中行对象
        // formList:搜索条件对象 分页控制对象
        formList: {
            groupId: '',
            name: '',
            storageFileName: '',
            createdTime: '',
            createdBy: '',
            createdById: '',
            status: '',
            bizId: '',
            tagName: '',
            percentage: ''
        },
        // tableData:表格数据
        tableData: [],
        // OperatorLogParam:用于记录日志
        OperatorLogParam: {
            operateContent: '',
            operateFeatures: '',
            operateState: '',
            operateType: ''
        },
        activeName: '1',
        // 分页配置
        pageConfig: {
            currentPage: 1,
            pageSize: 10,
            total: 1000
        },
        // dialog
        type: '',
    })
    // 解构抛出 直接使用
    // const { type} = toRefs(data)

    // Mounted
    onMounted(() => {
        getData();
        // window.onresize = () => {
        //     return (() => {
        //         data.screenHeight = window.innerHeight
        //     })()
        // }

        // 菜单界面生成时日志记录
        // const islog = Vue.prototype.$config.ISLOG;
        // if (true==islog){
        //     this.OperatorLogParam.operateFeatures = '菜单点击'
        //     this.OperatorLogParam.operateType = LogType.Query
        //     this.OperatorLogParam.operateState = '成功'
        //     OperatorLog.setOperationLog(this.OperatorLogParam)
        // }
    })

    // Methods
    const getData = () => {
        // 查询方法
        // 查询参数
        const params = {
            groupId : data.formList.groupId,
            name : data.formList.name,
            storageFileName : data.formList.storageFileName,
            createdTime : data.formList.createdTime,
            createdBy : data.formList.createdBy,
            createdById : data.formList.createdById,
            status : data.formList.status,
            bizId : data.formList.bizId,
            tagName : data.formList.tagName,
            percentage : data.formList.percentage,
            pageIndex : data.pageConfig.currentPage,
            pageSize : data.pageConfig.pageSize
        }
        // 后台请求
        Api.selpage4sysoss(params).then(res=> {
            if (res.code === 200){
                data.tableData = res.data.records
                data.pageConfig.total = res.data.total
                data.isSearch = false
            }

            // 日志记录
            // data.OperatorLogParam.operateContent = JSON.stringify(params)
            // data.OperatorLogParam.operateFeatures = '查询列表'
            // data.OperatorLogParam.operateType = LogType.Query
            // data.OperatorLogParam.operateState = '成功'
            // OperatorLog.setOperationLog(this.OperatorLogParam)

        })
    }
    // 添加记录
    const itemDialog = ref();
    const addData = () => {
        data.type = "add";
        itemDialog.value.init(null,data.type);
    }
    // 下载模板
    const downloadExcelTemplate = () => {
        const params = {}
        Api.downloadExcelTemplate(params).then(data => {
            console.log(data)
            const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
            const blobUrl = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = blobUrl
            a.download = 'SysOss.xls'
            a.click()
            window.URL.revokeObjectURL(blobUrl)
        })
    }

    // 导入数据
    const uploadExcelRef = ref();
    const uploadExcel = () => {
        // const uploadExcelUrl = Api.uploadExcelUrl();
        uploadExcelRef.value.init(this.SHOP_SERVER + '/sysoss/uploadExcel');
    }

    const deleteDataMany = () => {
        // 删除多条记录
        const datas = data.selectedRows
        const dataids = []
        if (!datas || !datas.length || datas.length === 0) {
            ElMessage({
                message: '请选择数据',
                type: 'warning',
            })
        } else {
            for (const i of datas) {
                dataids.push(i.id)
            }
            ElMessageBox.confirm(
                    '确认删除？',
                    '警告',
                    {
                        confirmButtonText: '确认删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
            ).then(() => {
                Api.dels4sysoss(dataids).then(res => {
                    if (res.code === 200){
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getData()
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: '删除失败',
                        })
                    }

                    // 日志记录
                    // this.OperatorLogParam.operateContent = JSON.stringify(dataids)
                    // this.OperatorLogParam.operateFeatures = '删除记录'
                    // this.OperatorLogParam.operateType = LogType.Query
                    // this.OperatorLogParam.operateState = '成功'
                    // OperatorLog.setOperationLog(this.OperatorLogParam)
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消删除',
                })
            })
        }
    }

    const queryData = () => {
        data.isSearch = true
        data.pageConfig.currentPage = 1
        getData()
    }

    const resetData = () => {
        // 重置事件
        data.isSearch = false
        for (const key in data.formList) {
            data.formList[key] = ''
        }
    }

    const excelData = () => {
        const params = {}
        Api.excelData4sysoss(params).then(data => {
            const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
            const blobUrl = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = blobUrl
            a.download = 'SysOss.xls'
            a.click()
            window.URL.revokeObjectURL(blobUrl)
        })
    }
    /**
     导入后的回调方法
     @param action: put/delete， put=上传，delete=删除
     @param status: true/false，true=成功，false=失败
     @param groupId: 附件组ID
     @param response: 响应内容
     **/
    const uploadExcelCallback = (action, status, groupId, response) =>{
        console.log("Success")
        // if (action === 'put' && status) {
        //     this.$notify({
        //         type: 'success',
        //         title: '导入成功',
        //         message: response.message,
        //         duration: 5000
        //     })
        // } else {
        //     this.$notify({
        //         type: 'error',
        //         title: '导入失败',
        //         message: response.message,
        //         duration: 5000
        //     })
        // }
    }
    const selectionChanged = (val: number) => {
        // 选中行变化事件
        data.selectedRows = val
    }

    const toUpdate = (scope) => {
        data.type = "update"
        itemDialog.value.init(scope.row.id, data.type);
    }
    const toDetail = (scope) => {
        data.type = "detail"
        itemDialog.value.init(scope.row.id, data.type);
    }

    const toDelete = (scope) => {
        ElMessageBox.confirm(
                '确认删除？',
                '警告',
                {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
        ).then(() => {
            console.log(scope.row.id)
            Api.del4sysoss(scope.row.id).then(res => {
                console.log(res)
                if (res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getData()
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '删除失败',
                    })
                }
            })

            // 日志记录
            // this.OperatorLogParam.operateContent = JSON.stringify(dataids)
            // this.OperatorLogParam.operateFeatures = '删除记录'
            // this.OperatorLogParam.operateType = LogType.Query
            // this.OperatorLogParam.operateState = '成功'
            // OperatorLog.setOperationLog(this.OperatorLogParam)
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
    }

    const handleCurrentChange = (val: number) => {
        // 页码切换事件
        data.pageConfig.currentPage = val
        getData()
    }

    const handleSizeChange = (val: number) => {
        // 页面条数变化事件
        data.pageConfig.pageSize = val
        getData()
    }

    const activated = () => {
        getData()
    }

</script>
<style lang="css" scoped>
/* 单页面样式 */
>>>.el-table .cell {
  white-space: nowrap
}
</style>
